<template>
  <div class="gift-detail">
    <!-- 领取礼物顶部图片展示 -->
    <div class="gift-detail-img">
      <div class="img"><img :src="giftData.gift_background" alt=""></div>
      <div class="msg">
        <div class="avatar"><img :src="info.author" alt=""></div>
        <div class="txt" :style="`color:${giftData.gift_font_color}`"><span>{{giftData.get_gift_content}}</span></div>
      </div>
    </div>
    <!-- 领取礼物展示 -->
    <div class="gift-detail-good">
      <!-- 来自小伙伴的礼盒 -->
      <div class="banner" v-if="giftData.type && giftData.type == 2"><img src="https://img.wifenxiao.com/h5-wfx/images/gift/gift_hb_banner.png" alt=""></div>
      <!-- 商品信息 -->
      <div class="gift-detail-good-item">
          <div class="gift-detail-good-item-left">
              <img :src="info.is_compress == 1 ? info.img_src + '480x480':info.img_src " alt="">
          </div>
          <div class="gift-detail-good-item-right">
              <div class="title">{{info.item_title}}</div>
              <div class="address">
                  <p><span style="margin-right: 5px">{{info.receiver_name}}</span><span>{{info.receiver_mobile}}</span></p>
                  <p>{{info.receiver_address}}</p>
              </div>
              <div class="priopt">
                  <div class="gift-num">
                    <span>剩余<span class="num">{{info.gift_num}}</span>份</span>
                    <span>共<span class="num">{{info.num}}</span>份</span>
                  </div>
                  <div class="btn">
                    <div class="btn-buy red-gra-btn" @click="navToCollcateDetail(info.item_id)">查看商品</div>
                  </div>
              </div>
          </div>
      </div>
      <!-- 未使用的礼物码 -->
      <div class="gift-detail-good-code" v-if="giftData.gift_codes && giftData.gift_codes.length > 0">
        <span>未使用的礼物验证码：</span>
        <span class="code-item" v-for="item in giftData.gift_codes" :key="item">{{item}}</span>
      </div>
    </div>
    <!-- 领取列表提示 -->
    <div class="gift-detail-list" v-if="peerInfos.length > 0">
      <ul>
        <li class="gift-detail-list-item" v-for="(item, index) in peerInfos" :key="index">
          <div class="gift-detail-list-item-avatar"><img :src="item.author" alt=""></div>
          <div class="gift-detail-list-item-cont">
            <div class="cont-msg">
              <p>{{item.receiver_name}}</p>
              <p>{{item.create_time}}</p>
              <p>{{item.message}}</p>
            </div>
            <div class="cont-num">
              <span>领到</span><span>1</span><span>份</span>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <!-- 按钮区域 -->
   
    <div class="gift-detail-btn" :class="info.gift_num==0 && mpType == 2 ? 'hide': ''">
      <div class="gift-detail-btn-item" @click="navToCollcateDetail(info.item_id)" v-if="info.gift_num==0">我也要</div>
      <div class="gift-detail-btn-item2" @click="navToGetGift(giftData.order_id)" v-if="info.gift_num!=0 && mpType == 2">领礼物</div>
      <div class="gift-detail-btn-item2 red-gra-btn" @click="navToCollcateDetail(info.item_id)" v-if="info.gift_num!=0 && mpType == 2">我也送</div>
      <!-- TODO 小程序分享处理 -->
      <wx-button class="gift-detail-btn-item red-gra-btn" open-type="share" v-if="info.gift_num!=0 && mpType != 2">喊小伙伴来收礼</wx-button>
    </div>

    <van-overlay :show="sharePopShow" :z-index="99">
      <div class="wrapper" @click="sharePopShow = false">
        <img src="https://img.wifenxiao.com/h5-wfx/images/item/bargain/bargin_share.png" alt="">
      </div>
    </van-overlay>

    <!-- 授权弹出框 -->
    <small-login ref="smalllogin"></small-login>
  </div>
</template>

<script>
import Vue from 'vue'
import { Overlay } from 'vant'
Vue.use(Overlay)
import { formatDate } from '@/utils/index'
import { mpShare } from '@/utils/utils'
// import { mapGetters } from 'vuex'
import { getGiftDetail } from '@/api/item/activity.js'
import small from '@/smallapp/small'
import SmallLogin from '@/components/SmallLogin/smallLogin'

export default Vue.extend({
  components: {
    SmallLogin
  },
  data() {
    return {
      defaultAvatar: 'https://img.wifenxiao.com/h5-wfx/images/default_avatar.jpg',
      giftData: {},
      info: {},
      peerInfos: [],
      sharePopShow: false,
      shareOption: {},
      shareInfo: {},
      mpType: 1
    }
  },
  created() {
    this.init()
  },
  mounted() {
      window.addEventListener('wxload', query => {
          // console.log(query, '分享参数')
          query.mpType ? this.mpType = query.mpType : ''
          small.HandleShareParams()
      })

      window.addEventListener('wxshow', () => {
        if (!small.checkLogin()) {
          this.$refs.smalllogin.openSmallLoginPop()
        }
      })

      window.$$subscribe('loginReload', reload => {
          if (reload) {
            this.init()
          }
      })
  },
  methods: {
    getTime(time) {
      return formatDate(time)
    },

    init() {
      const sendData = {}
      sendData.id = this.$route.query.id
      sendData.type = this.$route.query.type
      this.getGiftDetailFun(sendData)
    },
    // 喊小伙伴来收礼
    handleClickSend() {
      this.sharePopShow = true
      
    },
    /**
     * 领礼物
     */
    navToGetGift(id) {
        if (!small.checkLogin()) {
          this.$refs.smalllogin.openSmallLoginPop()
          return false
        }
      if (this.info.gift_num <= 0) {
        this.$Error('你来晚了一步，礼物已被领完～')
        return false
      }
      this.$JumpName(this, 'get-gift', { id: id })
    },

    /**
     * 查看商品
     */
    navToCollcateDetail(id) {
      this.$JumpName(this, 'item-detail', { detailId: id })
    },

    /**
     * 获取送礼详情
     */
    getGiftDetailFun(sendData) {
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 10000)
      getGiftDetail(sendData).then(res => {
        this.$loadingWrap.close()
        if (res.status === 1) {
          // TODO type不为2的时候才拿后台返回的值
          this.mpType != 2 ? this.mpType = res.data.type : ''
          this.giftData = res.data
          this.info = res.data.info
          this.peerInfos = res.data.peer_infos
          
          // TODO 小程序分享
          this.shareInfo = {
            title: res.data.jsapi_title,
            imgUrl: res.data.jsapi_img,
            shareParam: 'mpType=2&id=' + this.giftData.order_id
          }
          mpShare (true, false, '/activity/pages/giftDetail/index', this.shareInfo)
          
        }
      })
    },

    shareSuccess() {
      this.init()
    }
  },
  beforeDestroy() {
    window.$$unsubscribe('loginReload')
  },
})
</script>

<style lang="scss">
@import 'src/styles/variables.scss';
@import 'src/styles/mixin';
  // TODO 底部copyright样式处理
 .miniprogram-root {
    .public-bottom {
      padding-bottom: 100px!important;
    }
 }
.gift-detail {
  width: 100%;
  padding: 25px 25px 125px;
  box-sizing: border-box;
  &-img {
    width: 100%;
    padding: 25px;
    box-sizing: border-box;
    background: #fff;
    border-radius: 20px;
    margin-bottom: 20px;
    .img {
      width: 100%;
      height: 670px;
      border-radius: 10px;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .msg {
      position: relative;
      margin-top: -44px;
      padding-top: 10px;
      .avatar {
        width: 166px;
        margin: 0 auto;
        padding: 10px 0;
        background: url('https://img.wifenxiao.com/h5-wfx/images/gift/img_bg.png') center top
          no-repeat;
        background-size: 100%;
        img {
          display: block;
          width: 100px;
          height: 100px;
          margin: 0 auto;
          border-radius: 50%;
        }
      }
      .txt {
        width: 100%;
        padding: 10px 0;
        text-align: center;
        &>span {
          font-size: 28px;
          line-height: 1.5;
          color: #666666;
        }
      }
    }
  }
  &-good {
    margin: 20px 0px;
    background-color: #fff;
    border-radius: 20px;
    box-sizing: border-box;
    .banner {
      width: 100%;
      height: 75px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    &-item {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      width: 100%;
      padding: 25px;
      box-sizing: border-box;
      &-left {
          width: 186px;
          height: 186px;
          border-radius: 10px;
          overflow: hidden;
          img{
              width: 100%;
              height: 100%;
          }
      }
      &-right {
          width: 69%;
          flex: 1;
          color: #333;
          margin-left: 20px;
          position: relative;
          .title {
              font-weight: bold;
              margin-bottom: 18px;
              @include lineClamp(24px, 1.4, 1);
          }
          .address {
              color: #999;
              font-size: 22px;
              p {
                  margin-bottom: 6px;
                  &:last-child {
                      margin-bottom: 0;
                  }
              }
          }
          .priopt {
              position: absolute;
              bottom: 0;
              width: 100%;
              .gift-num {
                font-size: 24px;
                font-weight: 500;
                .num {
                  color: #F20B22;
                  margin: 0 4px;
                }
              }
              .btn {
                  position: absolute;
                  top: 20%;
                  right: 0px;
                  transform: translate(0, -50%);
                  &-buy{
                      color: #fff;
                      line-height: 24px;
                      font-size: 22px;
                      font-weight: 500;
                      padding: 15px 26px;
                      border-radius: 26px;
                  }
              }
          }
      }
    }
    &-code {
      width: calc(100% - 50px);
      margin: 0 25px;
      padding: 25px 0 15px;
      box-sizing: border-box;
      border-top: 1px solid #EDEDED;
      span:first-child {
        color: #656565;
        font-weight: 500;
      }
      .code-item {
        display: inline-block;
        background: #F11228;
        border-radius: 5px;
        color: #fff;
        font-size: 24px;
        padding: 10px 15px;
        font-weight: 500;
        margin-right: 10px;
        margin-bottom: 10px;
        &:last-child{
          margin-right: 0;
        }
      }
    }
  }
  &-list {
    width: 100%;
    padding: 25px;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 20px;
    &-item {
      border-bottom: 1px solid #EDEDED;
      padding: 25px 0;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: flex-start;
      &:first-child {
        padding-top: 0;
      }
      &:last-child {
        padding-bottom: 0;
        border-bottom: 0;
      }
      &-avatar {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        overflow: hidden;
        margin-right: 15px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      &-cont {
        width: calc(100% - 85px);
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        .cont-msg {
          p {
            margin-bottom: 18px;
            &:nth-child(1) {
              font-weight: bold;
              font-size: 26px;
            }
            &:nth-child(2) {
              color: #999;
              font-size: 20px;
              font-weight: 500;
            }
            &:nth-child(3) {
              color: #656565;
              font-size: 24px;
              font-weight: 500;
              margin-bottom: 0;
            }
          }
        }
        .cont-num {
          font-size: 24px;
          font-weight: 500;
          span {
            &:nth-child(2) {
              margin: 0 5px;
              color: #F11227;
            }
          }
        }
      }
    }
  }
  &-btn {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 12;
    background: #fff;
    padding: 10px 25px;
    text-align: center;
    box-sizing: border-box;
    &.hide {
      display: none;
    }
    &-item {
      color: #fff;
      line-height: 28px;
      font-size: 28px;
      font-weight: 500;
      padding: 27px 26px;
      border-radius: 38px;
      text-align: center;
    }
    &-item2 {
      width: calc(50% - 30px);
      display: inline-block;
      color: #fff;
      line-height: 28px;
      font-size: 28px;
      font-weight: 500;
      padding: 27px 26px;
      border-radius: 38px;
      text-align: center;
      &:first-child {
        margin-right: 15px;
         @include gradient(right, #FFAD00, #FF8901);
      }
      &:last-child {
        margin-left: 15px;
      }
    }
  }
  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
